<script setup>
import router from "../../../router";
import MyNav from "../../../components/MyNav.vue";
import MyHead from "../../../components/MyHead.vue";
import MyTable from "../../../components/MyTable.vue";
import MyPager from "../../../components/MyPager.vue";
import {ElMessage} from "element-plus";
import {MINIO_AVATAR} from "../../../const/index.js";
import {onMounted, reactive, ref} from "vue";
import {deleteApi, deleteBatchApi, pageApi} from "../../../api/axios.js";
import {getResponseData, myPage} from "../../../util/request.js";
import {isNotEmpty, isNotNull} from "../../../util/index.js";
import {notYet} from "../../../util/index.js";
import {genderFormat} from "../../../util/project.js";
import {resetPasswordApi} from "../../../api/ums/user.js";
import {elConfirm} from "../../../util/element.js";

/* ==================== 页面常量 ==================== */

// 路径导航
const navItems = [
  {icon: 'User', label: '用户管理'},
  {icon: 'User', label: '用户列表'},
];

// 页面头
const headItems = [
  {type: 'ipt', span: 5, placeholder: '按账号搜索', callback: pageLikeUsername},
  {type: 'ipt', span: 5, placeholder: '按昵称搜索', callback: pageLikeNickname},
  {type: 'ipt', span: 5, placeholder: '按手机搜索', callback: pageLikePhone},
]

// 表格列
const columns = [
  {
    label: ['基本信息', '头像'], prop: 'avatar', type: 'img',
    minio: MINIO_AVATAR, tooltip: false, sortable: false,
  },
  {
    label: ['基本信息', '性别'], prop: 'gender', type: 'tag',
    format: genderFormat, width: 80,
    tagTypeFn: e => e === 0 ? 'warning' : 'primary'
  },
  {label: ['基本信息', '昵称'], prop: 'nickname'},
  {label: ['账号信息', '账号'], prop: 'username'},
  {label: ['账号信息', '手机'], prop: 'phone', width: 100},
  {label: ['账号信息', '邮件'], prop: 'email'},
  {label: ['实名信息', '姓名'], prop: 'realname', width: 80},
  {label: ['实名信息', '身份证号'], prop: 'idcard'},
  {label: ['其他信息', '年龄'], prop: 'age', width: 80},
  {label: ['其他信息', '星座'], prop: 'zodiac', type: 'tag', width: 80},
  {label: ['其他信息', '籍贯'], prop: 'province', type: 'tag', width: 100},
  {label: ['其他信息', '描述'], prop: 'info', type: 'card', tooltip: false},
];

// 表格按钮
const buttons = [
  {label: '角色列表', type: 'success', callback: userRoles},
  {label: '换绑手机', type: 'primary', callback: notYet},
  {label: '重置密码', type: 'danger', callback: resetPassword}
];

/* ==================== 分页查询 ==================== */

// 表格数据 + 分页数据
let records = ref();
let pageInfo = reactive({pageNum: 1, pageSize: 5, callback: page});
// 分页查询条件字段：账号，昵称，手机
let username = ref();
let nickname = ref();
let phone = ref();

/**
 * 分页查询记录
 *
 * 1. 定义分页基础配置，包括 records, pageInfo, api, params 等。
 * 2. 附加分页查询条件，如账号，昵称，手机号码等。
 * 3. 异步发送分页查询请求。
 *
 * @param pageNum 当前第几页，默认 1
 * @param pageSize 每页多少条，默认 5
 */
async function page(pageNum = pageInfo['pageNum'],
                    pageSize = pageInfo['pageSize']) {

  // 分页基础配置
  let config = {
    records, pageInfo,
    args: {module: 'user'},
    api: pageApi,
    params: {pageNum, pageSize},
  }

  // 附加为分页条件
  if (isNotEmpty(username.value)) config['params']['username'] = username.value;
  if (isNotEmpty(nickname.value)) config['params']['nickname'] = nickname.value;
  if (isNotEmpty(phone.value)) config['params']['phone'] = phone.value;

  // 发送分页请求
  await myPage(config);
}

/* ==================== 按登录账号模糊查询 ==================== */

/**
 * 若输入框有值，或者当前正处于按条件分页状态时，进行操作：
 *
 * <p> 1. 将输入框中的值赋值给分页条件字段变量。
 * <p> 2. 重新发送分页请求。
 *
 * @param val 输入框中的值
 */
function pageLikeUsername(val) {

  // 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求
  if (isNotNull(val) || username.value) {
    username.value = val;
    page();
  }
}

/* ==================== 按用户昵称模糊查询 ==================== */

/**
 * 若输入框有值，或者当前正处于按条件分页状态时，进行操作：
 *
 * <p> 1. 将输入框中的值赋值给分页条件字段变量。
 * <p> 2. 重新发送分页请求。
 *
 * @param val 输入框中的值
 */
function pageLikeNickname(val) {

  // 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求
  if (isNotNull(val) || nickname.value) {
    nickname.value = val;
    page();
  }
}

/* ==================== 按手机号码模糊查询 ==================== */

/**
 * 若输入框有值，或者当前正处于按条件分页状态时，进行操作：
 *
 * <p> 1. 将输入框中的值赋值给分页条件字段变量。
 * <p> 2. 重新发送分页请求。
 *
 * @param val 输入框中的值
 */
function pageLikePhone(val) {

  // 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求
  if (isNotNull(val) || phone.value) {
    phone.value = val;
    page();
  }
}

/* ==================== 重置密码 ==================== */

async function resetPassword(row) {
  if (!await elConfirm('正在重置密码，确认吗？')) return;
  let data = getResponseData(await resetPasswordApi(row['id']));
  if (isNotNull(data)) {
    ElMessage.success('密码重置为 123456789');
  }
}

/* ==================== 角色列表 ==================== */

function userRoles(row) {
  sessionStorage.setItem('userId', row['id']);
  sessionStorage.setItem('nickname', row['nickname'].toString());
  router.push('/UserRoles')
}

/* ==================== 加载函数 ==================== */

onMounted(() => page());

</script>

<template v-if="records">
  <my-nav :items="navItems"/>
  <my-head :items="headItems"/>
  <my-table module="user"
            insert-page="/UserInsert"
            update-page="/UserUpdate"
            :delete-api="deleteApi"
            :delete-batch-api="deleteBatchApi"
            :delete-callback="page"
            :excel-api="notYet"
            :records="records"
            :columns="columns"
            :buttons="buttons"/>
  <my-pager :page-info="pageInfo"/>
</template>

<style scoped lang="scss">

</style>